<template>
  <ul class="list-group">
    <!-- 真数据在数组循环 -->
    <li class="list-group-item d-flex justify-content-between align-items-center" v-for="item in todolist" :key="item.id">
      <div class="form-check">
        <!-- checkbox 复选框 -->
        <input type="checkbox" class="form-check-input" value="" :id="item.id" v-model="item.isCompleted" />
        <label class="form-check-label" :for="item.id">
          {{ item.task }}
        </label>
      </div>
      <div class="icon">
        <div>
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" :fill="getIconColor2(item)"
            class="bi bi-pencil-square" viewBox="0 0 16 16" @click="editItem(item.id)"
            @mouseover="setHoveredItem2(item.id, true)" @mouseout="setHoveredItem2(item.id, false)">
            <path
              d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z" />
            <path fill-rule="evenodd"
              d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z" />
          </svg>
        </div>
        <div>
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" :fill="getIconColor(item)"
            class="bi bi-trash3-fill" viewBox="0 0 16 16" @click="deleteItem2(item.id)"
            @mouseover="setHoveredItem(item.id, true)" @mouseout="setHoveredItem(item.id, false)">
            <path
              d="M11 1.5v1h3.5a.5.5 0 0 1 0 1h-.538l-.853 10.66A2 2 0 0 1 11.115 16h-6.23a2 2 0 0 1-1.994-1.84L2.038 3.5H1.5a.5.5 0 0 1 0-1H5v-1A1.5 1.5 0 0 1 6.5 0h3A1.5 1.5 0 0 1 11 1.5Zm-5 0v1h4v-1a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5ZM4.5 5.029l.5 8.5a.5.5 0 1 0 .998-.06l-.5-8.5a.5.5 0 1 0-.998.06Zm6.53-.528a.5.5 0 0 0-.528.47l-.5 8.5a.5.5 0 0 0 .998.058l.5-8.5a.5.5 0 0 0-.47-.528ZM8 4.5a.5.5 0 0 0-.5.5v8.5a.5.5 0 0 0 1 0V5a.5.5 0 0 0-.5-.5Z" />
          </svg>
        </div>

      </div>


      <span class="badge bg-primary rounded-pill" v-if="item.isCompleted">
        已完成
      </span>
      <span class="badge bg-warning rounded-pill" v-else>未完成</span>
    </li>
  </ul>
</template>

<script>
export default {
  name: "todolist",
  props: {
    todolist: {
      type: Array,
      required: true,
      default: [],
    },
  },
  data() {
    return {
      hoveredItem: null,
      hoveredItem2: null,
    };
  },
  methods: {
    deleteItem(id) {
      const index = this.todolist.findIndex((item) => item.id === id);
      if (index !== -1) {
        this.todolist.splice(index, 1);
      }
    },
    setHoveredItem(id, isHovered) {
      this.hoveredItem = isHovered ? id : null;
    },
    setHoveredItem2(id, isHovered) {
      this.hoveredItem2 = isHovered ? id : null;
    },
    editItem(id) {
      const item = this.todolist.find((item) => item.id === id);
      if (item) {
        const newText = prompt("请编辑任务名称:", item.task);
        if (newText !== null) {
          item.task = newText;
        }
      }
    },
    deleteItem2(id) {
      const item = this.todolist.find((item) => item.id === id);
      if (item) {
        const boolean = confirm("确认要删除吗");
        if (boolean) {
          this.deleteItem(id)
        }
      }
    }
  },
  computed: {
    getIconColor() {
      return (item) =>
        this.hoveredItem === item.id ? "#8B0000	" : "currentColor";
    },
    getIconColor2() {
      return (item) =>
        this.hoveredItem2 === item.id ? "blue" : "currentColor";
    },
  },
};
</script>

<style scoped>
.list-group {
  width: 500px;
  margin: auto;
}

.icon {
  display: flex;
  margin-right: 20px;
  margin-left: auto;
  gap: 10px;
}
</style>